<!--
 $ @Author: liujiajun 45444154+wo1261931780@users.noreply.github.com
 $ @Date: 2022-06-12 20:28:42
 $ @LastEditors: liujiajun 45444154+wo1261931780@users.noreply.github.com
 $ @LastEditTime: 2022-06-12 20:28:46
 $ @FilePath: \st-html.github.io\src\aaa012\a069行内块元素.html
 $ @Description: 1111
 $ @
 $ @Copyright (c) 2022 by liujiajun 45444154+wo1261931780@users.noreply.github.com, All Rights Reserved.
 -->
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible"
              content="IE=edge">
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0">

        <title>Document</title>
        <style>
            img {
                width: 300px;
                height: 300px;
                background-color: #ccc;
            }

            /* 这里也可以看出来 */
            /* 如果我直接给img设置大小 */
            /* 因为img本身就代表了一张图片 */
            /* 所以相当于给图片设置了大小 */
        </style>
    </head>

    <body>
        <div>我是块元素</div>
        <img src="../img/demo.png"
             alt="我是行内块元素">
        <!-- 行内块元素的特点是 -->
        <!-- 首先是行内元素，一行可以展示多个 -->
        <!-- 同时是块元素，我可以设置宽高 -->
        <img src="../img/demo.png"
             alt="我是测试元素">


    </body>

</html>